<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>data-bidirectional-binding</title>
</head>
<style>
  #app {
    text-align: center;
  }
</style>

<body>
  <div id="app">
    <h2>{{title}}</h2>
    <input v-model="name">
    <h1>{{name}}</h1>
    <button v-on:click="clickMe">click me!</button>
  </div>
</body>
<script src="observer.js"></script>
<script src="watcher.js"></script>
<script src="compile.js"></script>
<script src="index.js"></script>
<script type="text/javascript">

  new SelfVue({
    el: '#app',
    data: {
      title: 'hello world',
      name: 'canfoo'
    },
    methods: {
      clickMe: function () {
        this.title = 'hello world';
      }
    },
    mounted: function () {
      window.setTimeout(() => {
        this.title = '你好';
      }, 1000);
    }
  });

</script>

</html>